<template>
    <div class="sszd">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 5px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                        
                            <Form :model="formItem" label-position="left" inline>
                                <Select v-model="refvip" size="small" style="width:120px">
                                    <Option value="会员用户名" key="2">会员用户名</Option>                                        
                                    <Option value="上级代理用户名" key="1">上级代理用户名</Option>
                                </Select>
                                :
                                <Input size="small" v-model="userName" style="width: 150px" :placeholder="'请输入'+refvip"></Input>
                                <span>彩种：</span>
                                <Select v-model="lottery" size="small" style="width:120px">
                                    <Option :value="0" key="all">全部</Option>                                    
                                    <Option v-for="item in gameInfo.lottery_set" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </Select>
                                <span>状态：</span>
                                <Select v-model="model2" size="small" style="width:100px">
                                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <span style="margin-left: 10px;">选择日期范围：</span>
                                <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="请输入时间范围" style="width: 200px"></DatePicker>
                                <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 0px;" @click="searchReset">重置</Button>
                            </Form>
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con">
                    <Table border stripe :columns="title" :data="data" ></Table>
                    <Row class="margin-top-10" :gutter="10">
                        <Col :md="12" :lg="12">
                            <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                        </Col>
                    </Row>
                    
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less">
.order{
    font-size: 16px;
    margin-left: 5px;
}
.sszd{
    .ivu-form-item{
        margin-bottom:0px;
    }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
}
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            refvip:'会员用户名',
            lottery:0,
            model2: '',
            userName:'',
            gameInfo:{},
            userInfo:{},
            formItem:{
                time:["",""],
                input:''
            },
            is_directly:false,
            ref_id:0,
            
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                user_name:{
                    operator:'=',
                    value:''
                },
                ref_user_name:{
                    operator:'=',
                    value:''
                },
                gid:{
                    operator:'>',
                    value:'0'
                },
                status_code:{
                    operator:'=',
                    value:''
                }
            },
            order_param:'id',
            cityList: [
                    {
                        value: '-1',
                        label: '未开奖'
                    },
                    {
                        value: '1',
                        label: '未中奖'
                    },
                    {
                        value: '2',
                        label: '中奖'
                    },
                    {
                        value: '3',
                        label: '撤单'
                    }
                ],
                
            data:[],
            title:[
                {
                    title:'用户名',
                    key: 'user_name',
                    align:'center',
                },
                {
                    title:'直属上级',
                    key: 'ref_user_name',
                    align:'center',
                },
                {
                    title:'彩种',
                    key: 'lt_name',
                    align:'center',
                },
                {
                    title:'期号',
                    key: 'issue',
                    align:'center',
                },
                {
                    title:'开奖结果',
                    key: 'open_number',
                    align:'center',
                },
                {
                    title:'彩种标签',
                    key: 'tab_name',
                    align:'center',
                    render: (h, params) => {
                        return h('div',`${params.row.tab_name}--${params.row.cat_name}`);
                    }
                },
                {
                    title:'投注内容',
                    key: 'play_name',
                    align:'center',
                },
                {
                    title:'投注金额',
                    key: 'order_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.order_money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'派奖金额',
                    key: 'bonus',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.bonus
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'投注时间',
                    key: 'created',
                    align:'center',
                },
                {
                    title:'状态',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                        switch(params.row.status_code)
                        {
                            case -1:
                                return h('div', [
                                    h('Tag', {
                                        props: {
                                            size: 'small',
                                            disabled: true,
                                            color:'blue'
                                        }
                                    },'未开奖')
                                ]);
                                break;
                            case 1:
                                return h('div', [
                                    h('Tag', {
                                        props: {
                                            size: 'small',
                                            disabled: true,
                                            color:'green'
                                        }
                                    },'未中奖')
                                ]);
                                break;
                            case 2:
                                return h('div', [
                                    h('Tag', {
                                        props: {
                                            size: 'small',
                                            disabled: true,
                                            color:'yellow'
                                        }
                                    },'中奖')
                                ]);
                                break;
                            case 3:
                                return h('div', [
                                    h('Tag', {
                                        props: {
                                            size: 'small',
                                            disabled: true,
                                            color:'red'
                                        }
                                    },'撤单')
                                ]);
                                break;
                        }
                    }
                },
                // {
                //     title:'反水',
                //     key: 'order_rebate',
                //     align:'center',
                //     // renderHeader: (h, params) => {
                //     //     return h('div', [
                //     //         h('Tooltip', {
                //     //             props: {
                //     //                 trigger:'hover',
                //     //                 placement:'top',
                //     //                 content:'自己、代理、总代、股东，大股东，分公司'
                //     //             }
                //     //         }, '反水...'),
                //     //     ]);
                //     // }
                // },
                {
                    title:'当前余额',
                    key: 'balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.balance
                               }
                           })
                    },
                    
                },
                {
                    title:'操作',
                    key: '',
                    width: 150,
                    align:'center',
                    render: (h, params) => {
                        if(params.row.status_code===-1){
                            return h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: false
                                    },
                                    on: {
                                        click: () => {
                                            this.cancelOrder (params.row,params.index)
                                        },
                                    },
                                },'撤单')
                        }else{
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: true
                                    }
                                },'已处理')
                            ]);
                        }
                    }
                },
            ]
                
            
        }
    },
    computed: {
        treeData () {
            return this.$store.state.app.tree.data
        }
    },
    watch: {  
        treeData: function(a, b) {  //a改变后的b改变前的
            this.is_directly=a.directly
            this.ref_id=a.id
            this.getsszd()
        }  
    }, 
    methods: {
        init(){
            
            this.$store.commit('setShowTree',{show:true,dshow:false})
            // this.formItem.time=this.getNowFormatDate()
            this.gameInfo=JSON.parse(sessionStorage.gameInfo)
            this.userInfo=JSON.parse(sessionStorage.user)
            
            // this.getsszd()
            
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getsszd()
        },
        cancelOrder(r,i){
            let data={
                query:{
                    is_directly:this.is_directly,
                    limit:this.page.limit,
                    order_param:this.order_param,
                    query_params:this.$oc.ocqm(this.queryData),
                    ref_id:this.ref_id
                },
                data:{
                    ...r
                }
            }
            this.$api.repeater(this,'setOrder',data).then(res=>{
                if(res.success==true){
                    this.$set(this.data,i,{...r,...res.data})
                    this.$Notice.success({
                        title: '撤单成功',
                    });
                }else{
                    this.$Notice.error({
                        title: '撤单失败',
                    });
                }
            })
        },
         search(){
            this.queryData.status_code.value=this.model2
            // console.log(this.lottery)
            if(this.lottery==0){
                this.queryData.gid.operator=">"
                this.queryData.gid.value=this.lottery
                
            }else{
                this.queryData.gid.operator="="
                this.queryData.gid.value=this.lottery
            }
            
            switch(this.refvip)
            {
                case '会员用户名':
                    this.queryData.user_name.value=this.userName
                    this.queryData.ref_user_name.value=''
                    break;
                case '上级代理用户名':
                    this.queryData.ref_user_name.value=this.userName
                    this.queryData.user_name.value=''
                    break;
            }
            
            
            this.getsszd ()
        },
        searchReset(){
            this.model2=''
            this.refvip='会员用户名'
            this.userName=''
            this.lottery=0
            this.formItem.time=["",""]
            this.search()
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getsszd()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getsszd()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
        setTime(t){
            this.formItem.time=t
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        getsszd(){
            // console.log(this.queryData)
            let data={
                is_directly:this.is_directly,
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                ref_id:this.ref_id,
                time_between:this.formItem.time[0]!==""?`${this.formItem.time[0]},${this.formItem.time[1]}`:''
            }
            this.$api.repeater(this,'getOrder',data).then(res=>{
                this.page.count=res.count
                if(res.data==null){
                    this.data=[]
                }else{
                    this.data=res.data
                }
            })
        }
    },
    mounted (){
        this.init()
    }
};
</script>
